<template>
  <div
    class="flex items-center justify-between text-[#666666] text-[12px] select-none"
  >
    <el-space
      direction="horizontal"
      alignment="start"
      :size="8"
      class="flex items-center"
    >
      <span>状态</span>
      <!-- 
        <el-select
        v-model="state.status"
        class="w-[124px]"
        filterable
        placeholder="全部可用状态"
      >
        <el-option
          v-for="item in useList"
          :key="item.value"
          :label="item.label"
          :value="(item.value  as any)"
        />
      </el-select>
       -->
      <el-select
        v-model="state.pack_status"
        class="w-[124px]"
        filterable
        placeholder="全部打包状态"
      >
        <el-option
          v-for="item in packStatusList"
          :key="item.value"
          :label="item.label"
          :value="(item.value  as any)"
        />
      </el-select>

      <el-input
        v-model.trim="state[getBindField]"
        placeholder="请输入"
        clearable
        class="ml-4 input-with-select"
        @clear="handleRefresh"
        @keyup.enter="handleClickIcon"
      >
        <template #prepend>
          <el-select
            v-model="state.fieldStatus"
            placeholder="请选择"
            style="width: 96px"
          >
            <el-option
              v-for="item in operationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleClickIcon" />
        </template>
      </el-input>
    </el-space>
    <el-space
      direction="horizontal"
      alignment="start"
      :size="16"
      class="operation-right"
    >
      <el-button
        type="primary"
        plain
        :icon="Refresh"
        class="w-8 mr-[-16px]"
        @click="() => handleRefresh()"
      ></el-button>
    </el-space>
  </div>
</template>
<script lang="ts" setup>
import {
  state,
  PACK_STATUS_LIST,
  // USE_STATUS_LIST,
  OPERATION_LIST,
  OPERATION_DATA,
  resetFunc
} from '../state'
import { Search, Refresh } from '@element-plus/icons-vue'
import type { NodeGroupData } from '@/apis/model/node'
const emit = defineEmits(['refresh-list'])

const packStatusList = computed(() => PACK_STATUS_LIST)
const operationList = computed(() => OPERATION_LIST)
// const useList = computed(() => USE_STATUS_LIST)
const getBindField = computed(() => OPERATION_DATA[state.fieldStatus])
const handleRefresh = () => emit('refresh-list')

const handleClickIcon = () => {
  reset()
  emit('refresh-list')
}

const groupList = ref<NodeGroupData[]>()
const getGroupList = () => {
  node_group({})
    .then(res => {
      groupList.value = res?.list ?? []
      groupList?.value?.unshift({ id: 0, name: '全部分组' })
    })
    .finally(() => {})
}
const reset = () => {
  const field = getBindField.value
  const arr = ['platform', 'node_name', 'tcc_version', 'kernel_version']
  if (arr.includes(field)) {
    const newArr = arr
      .map(item => {
        if (item !== field) return item
      })
      .filter(Boolean)
    newArr.forEach((item: any) => (state[item] = ''))
  }
}
//防抖
const antiShake = (time: number) => {
  return setTimeout(() => {
    handleRefresh()
  }, time)
}
let timer: any = null
watch(
  [() => state.pack_status],
  () => {
    clearTimeout(timer)
    timer = antiShake(300)
  },
  { deep: true, immediate: true }
)
onMounted(() => getGroupList())
onUnmounted(() => resetFunc())
</script>

<style lang="scss" scoped>
:deep(.el-select) {
  .el-input__inner {
    font-size: 12px;
    color: #333333;
  }
}
:deep(.el-button) {
  font-size: 12px;
}
:deep(.input-with-select) {
  .el-input .el-input--suffix {
    background: #fff;
  }
  .el-input__wrapper {
    color: #000;
    .el-input__inner {
      // width: 162px;
    }
  }
  .el-input-group__append {
    padding: 0 14px;
    background: #fff;
  }
}
.operation-right {
  .el-button {
    width: 88px;
  }
}
</style>
